<template>
	<view>
		<!-- 轮播图 -->
		<view class="re-swiper">
			<u-swiper :list="swiperList" indicator indicatorMode="line" circular height="308rpx"></u-swiper>
		</view>
		<!-- 新上好课 -->
		<view class="re-new">
			<view class="new-title">
				<view class="new-title-name">新上好课</view>
				<view class="new-title-more">查看更多</view>
			</view>
			<view class="new-list">
				<view v-for="item in newList" :key="item.id">
					<view class="new-list-item">
						<img class="new-item-img" :src="item.courseCover" />
						<view class="new-item-main">
							<view class="new-item-title">{{ item.courseName }}</view>
							<view class="new-item-type">{{ courseType(item.courseLevel) }}</view>
							<view class="new-item-total">
								<view class="new-item-price" v-if="item.salePrice != 0">
									<view>限时优惠</view>
									<view style="padding-left: 21rpx">￥{{ item.salePrice }}</view>
								</view>
								<view class="new-item-price" v-else>
									<view>免费</view>
								</view>
								<view class="new-item-number">{{ courseNumber(item.clicks) }}人学习</view>
							</view>
						</view>
					</view>
					<u-divider text=""></u-divider>
				</view>
			</view>
		</view>
		<!-- 推荐好课 -->
		<view class="recommend">
			<view class="new-title recommend-title">
				<view class="new-title-name">推荐好课</view>
				<view class="new-title-more">查看更多</view>
			</view>
			<view class="">
				<scroll-view class="nav-bar" scroll-x="true">
					<view class="nav-bar-wrap">
						<block v-for="item in heatList" :key="item.id">
							<view class="nav-bar-item">
								<image class="nav-bar-item-img" :src="item.courseCover" mode=""></image>
								<view class="nav-bar-item-main">
									<view class="nav-bar-item-type">{{ courseType(item.courseLevel) }} {{ item.purchaseCounter }}人报名</view>
									<view v-if="item.salePrice != 0">
										<view class="nav-bar-item-price">
											<view class="nav-bar-item-oprice">￥{{ item.discountPrice }}</view>
											<view class="nav-bar-item-pprice">￥{{ item.salePrice }}</view>
										</view>
										<view class="nav-bar-item-price-text">限时优惠</view>
									</view>
									<view v-else>
										<view class="nav-bar-item-oprice">免费</view>
										<view class="nav-bar-item-price-text">限时优惠</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 大家都在看 -->
		<view class="re-lo">
			<view class="new-title">
				<view class="new-title-name">大家都在看</view>
			</view>
			<view class="new-list">
				<view v-for="item in courseSearchList" :key="item.id">
					<view class="new-list-item">
						<img class="new-item-img" :src="item.courseCover" />
						<view class="new-item-main">
							<view class="new-item-title">{{ item.courseName }}</view>
							<view class="new-item-type">{{ courseType(item.courseLevel) }}</view>
							<view class="new-item-total">
								<view class="new-item-price" v-if="item.salePrice != 0">
									<view>限时优惠</view>
									<view style="padding-left: 21rpx">￥{{ item.salePrice }}</view>
								</view>
								<view class="new-item-price" v-else>
									<view>限时优惠</view>
									<view style="padding-left: 21rpx">免费</view>
								</view>
								<view class="new-item-number">{{ courseNumber(item.clicks) }}人学习</view>
							</view>
						</view>
					</view>
					<u-divider text=""></u-divider>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSlider } from '@/api/home.js';
import { mostNew, mostHeat, searchCourse } from '@/api/course.js';
//引入混入文件
import { mixin } from '../../mixins/mixin';

export default {
	//挂载混入文件
	mixins: [mixin],
	props: {
		// courseSearchList: {
		// 	type: Array,
		// 	default: []
		// }
	},
	data() {
		return {
			swiperList: [],
			newList: [],
			heatList: [],
			courseSearchList: [],
			courseParams: {
				pageNum: 1,
				pageSize: 5,
				entity: {
					sortBy: 'clicks-desc'
				}
			}
		};
	},
	created() {
		const _this = this;
		//查询轮播图
		getSlider().then((res) => {
			_this.swiperList = res.list.map((v) => v.imageUrl);
		});
		//查询新上好课
		mostNew({
			pageNum: 1,
			pageSize: 3
		}).then((res) => {
			_this.newList = res.pageInfo.list;
		});
		//查询推荐好课
		mostHeat({
			pageNum: 1,
			pageSize: 6
		}).then((res) => {
			_this.heatList = res.pageInfo.list;
		});
		this.getCourseList();
	},
	methods: {
		getCourseList() {
			//大家都在看列表
			searchCourse(this.courseParams).then((res) => {
				this.courseSearchList = [...this.courseSearchList, ...res.pageInfo.list];
			});
		},
		loadMore() {
			this.courseParams.pageNum++;
			this.getCourseList();
		}
	}
};
</script>

<style scoped>
.re-swiper {
	padding: 14rpx;
}
/deep/ .u-swiper__indicator {
	/* 向右移动20rpx */
	right: 20rpx;
}
.re-new {
	padding: 14rpx;
}

.new-title {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 0;
}

.new-title-name {
	font-size: 40rpx;
	font-weight: 400;
	color: #333333;
}

.new-title-more {
	font-size: 26rpx;
	font-weight: 400;
	color: #a0a4ad;
}

.new-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-img {
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color: #ccc;
}
.new-item-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left: 23rpx;
}
.new-item-title {
	font-size: 29rpx;
	color: #191919;
	font-weight: 400;
	/* margin: 20rpx; */
}
.new-item-type {
	font-size: 24rpx;
	color: #c5c5c5;
	font-weight: 400;
	/* margin: 0 20rpx; */
}
.new-item-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* margin: 20rpx; */
}
.new-item-price {
	display: flex;
	font-size: 21rpx;
	color: #ff4b5c;
	font-weight: 600;
}
.new-item-number {
	font-size: 21rpx;
	font-weight: 400;
	color: #a0a4ad;
}

.recommend {
	padding-top: 20rpx;
}

.recommend-title {
	padding: 14rpx;
}

/* 隐藏滚动条 */
scroll-view::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}

.nav-bar-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 634rpx;
}

.nav-bar-item {
	width: 265rpx;
	height: 286rpx;
	background: rgba(255, 255, 255, 0.39);
	box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
	border-radius: 12px;
	margin-top: 28rpx;
	margin-left: 17rpx;
}

.nav-bar-item-img {
	width: 265rpx;
	height: 160rpx;
	border-radius: 12rpx;
}

.nav-bar-item-main {
	padding: 12rpx;
}

.nav-bar-item-type {
	font-size: 21rpx;
	color: #7b7b7b;
}
.nav-bar-item-price {
	display: flex;
	padding: 4rpx 0;
}

.nav-bar-item-oprice {
	font-size: 22rpx;
	font-weight: 500;
	color: #ff0018;
}

.nav-bar-item-pprice {
	font-size: 18rpx;
	font-weight: 500;
	color: #b3b3b3;
	margin-left: 10rpx;
	/* 删除线 */
	text-decoration: line-through;
}

.nav-bar-item-price-text {
	font-size: 19rpx;
	color: #ff6464;
}

.re-lo {
	padding: 14rpx;
}
</style>
